@import 'theme';
@import 'functions';
@import 'mixins';

$cx-store-finder-list-list-items: 'light' !default;
$cx-store-finder-list-list-items-hover-background-color: 'background' !default;

.cx-store-finder-list {
  &__column-set {
    display: none;
    @include media-breakpoint-up(md) {
      display: flex;
      height: 70vh;
    }
  }
  &__column-set-mobile {
    display: block;
    @include media-breakpoint-up(md) {
      display: none;
    }
  }
  &__address-column {
    height: 100%;
    @include media-breakpoint-up(md) {
      height: 100%;
      overflow-y: scroll;
      padding-right: 0;
    }
  }
  &__map-column {
    // background: $light; //temporary bg, remove when google map is implemented
    @include media-breakpoint-up(md) {
      height: 100%;
      overflow-y: scroll;
    }
  }
  &__list {
    @include type('6');
    list-style: none;
    padding-left: 0;
  }
  &__selected-store-item {
    background-color: #eff0f0;
  }
  &__list-items {
    border-top: 1px solid;
    @include var-color('border-color', $cx-store-finder-list-list-items);
    padding-top: 1rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;

    &:hover {
      @include var-color(
        'background-color',
        $cx-store-finder-list-list-items-hover-background-color
      );
    }

    &--ordered {
      counter-increment: resultCount;
    }
    &--ordered:before {
      content: counter(resultCount, decimal);
      position: absolute;
      left: 1rem;
    }
  }

  &__not-found {
    @include type('4');
    text-align: center;
    padding: 3rem 0;
  }
}
